<template>
    <TUIKit
    :style="{ width: screenWidth+'px', height: screenHeight-20+'px',paddingBottom: '20rpx' }"
    :SDKAppID="$route.query.SDKAppID"
    :userID="$route.query.userID"
    :userSig="$route.query.userSig"
    :conversationID="`C2C${nickName}`"
    >
        <!-- <TUIChat></TUIChat> -->
    </TUIKit>
</template>

<script lang="ts" setup name="index">
    import { TUIKit, TUIChat } from "../TUIKit";
    import { onMounted, ref,watch } from 'vue';
    import { useRoute } from 'vue-router';
    const screenWidth = ref(0);
    const screenHeight = ref(0);
    const safeBottom = ref(0);
    const route = useRoute();
    const nickName = ref(route.query.nickName || ''); // 假设你的路由配置了动态参数nickName
    // 监听路由参数变化
    watch(() => route.query.nickName, (newId) => {
        console.log(newId, 'newId')
        nickName.value = newId;
    }, { immediate: true }); // immediate: true表示立即以当前值触发回调
    onMounted(() => {
        safeBottom.value = window.innerHeight-window.screen.height
        // 获取屏幕宽度和高度
        screenWidth.value = window.innerWidth;
        screenHeight.value = window.innerHeight;
        // 监听窗口大小变化以更新屏幕尺寸
        window.addEventListener('resize', () => {
            screenWidth.value = window.innerWidth;
            screenHeight.value = window.innerHeight;
        });
    });
</script>
<style lang="scss"></style>